
<template>
  <div v-loading="loading" class="main-container">
    <div class="head">
      <flexbox class="head__body">
        <!-- <el-date-picker
          v-model="hqdateVal"
          type="month"
          placeholder="选择月份"
          @change="time_value"
        >
        </el-date-picker> -->
        <el-select
              placeholder="请选择"
              v-model="dataVal"
            >
              <el-option
                v-for="item in data"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
              </el-option>
            </el-select>
        <el-button
          type="primary"
          style="width: 100px; height: 35px; margin-left: 20px"
          @click="searchClick"
          >查询</el-button
        >
      </flexbox>
    </div>
    <div style="margin-top: 60px"></div>
    <div class="handle-bar">
      <el-button class="export-btn" @click="exportClick">导出</el-button>
    </div>
    <div class="content">
      <div class="table-content">
        <div class="table_box">
          <div class="flex_list table_th">
            <p class="left">战队</p>
            <div class="flex_list" style="flex: 14">
              <p>小组</p>
              <p>战队负责人</p>
              <p>现有人数</p>
              <div class="flex_list" :style="{ flex: weekListlength }">
                <p v-for="(wek, index) in weekList" :key="index">
                  {{ wek.weekName }}
                </p>
              </div>
              <p>平均人均产值</p>
              <p>已完成回款数量</p>
              <p>已退款数量</p>
              <p>表单数</p>
              <p>线索量</p>
              <p>成交量</p>
              <p>表单转化率</p>
              <p>线索转化率</p>
            </div>
          </div>
          <template v-if="this.list.length > 0">
            <div class="table_tr" v-for="(item, index) in list" :key="index">
              <div class="flex_list">
                <div class="left">{{ item.name }}</div>
                <div class="right" style="flex: 14">
                  <div
                    class="flex_list"
                    v-for="it in item.data"
                    :key="it.deptId"
                  >
                    <p>{{ it.deptName }}</p>
                    <p>{{ it.manager }}</p>
                    <p>{{ it.personNum }}</p>
                    <div class="flex_list" :style="{ flex: weekListlength }">
                      <p v-for="(i, d) in it.weekData" :key="d">
                        {{ i.weekMoney }}
                      </p>
                    </div>
                    <p>{{ it.personAvg }}</p>
                    <p>{{ it.allMoney }}</p>
                    <p>{{ it.allMoneyFu }}</p>
                    <p>{{ it.formCount }}</p>
                    <p>{{ it.leadsCount }}</p>
                    <p>{{ it.dealCount }}</p>
                    <p>{{ it.formTransRate }}</p>
                    <p>{{ it.leadsTransRate }}</p>
                  </div>
                </div>
              </div>
              <div class="table_tr_sum flex_list">
                <div class="left"></div>
                <div class="flex_list" style="flex: 14">
                  <p>{{ item.sum.title }}</p>
                  <p></p>
                  <p>{{ item.sum.personNum }}</p>
                  <div class="flex_list" :style="{ flex: weekListlength }">
                    <p v-for="(s, m) in item.sum.weekData" :key="m">
                      {{ s.weekMoney }}
                    </p>
                  </div>
                  <p>{{ item.sum.personAvg }}</p>
                  <p>{{ item.sum.allMoney }}</p>
                  <p>{{ item.sum.allMoneyFu }}</p>
                  <p>{{ item.sum.formCount }}</p>
                  <p>{{ item.sum.leadsCount }}</p>
                  <p>{{ item.sum.dealCount }}</p>
                  <p>{{ item.sum.formTransRate }}</p>
                  <p>{{ item.sum.leadsTransRate }}</p>
                </div>
              </div>
            </div>
          </template>
          <div class="nullList" v-else>暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseMixin from "../mixins/Base";
import SortMixin from "../mixins/Sort";
import SummaryMixin from "../mixins/Summary";
import { resultsDataStat, resultsDataStatExport, queryTimeData } from "@/api/bi/customer";

export default {
  /** 业绩数据统计 */
  name: "CustomerTotalStatistics",
  mixins: [BaseMixin, SortMixin, SummaryMixin],
  data() {
    return {
      loading: false,

      postParams: {}, // 参数

      dataIndex: null,
      weekListlength: 0,
      weekList: [],
      list: [],
      axisList: [],

      hqdateVal: "", //日期
      data: [],
      dataVal: 0,
      month: "",
    };
  },
  computed: {
    // 列表请求参数
    listPostParams() {
      const params = { ...this.postParams };

      // if (this.dataIndex !== undefined && this.dataIndex !== null) {
      //   const dataItem = this.axisList[this.dataIndex];
      //   delete params.type;
      //   params.startTime = dataItem.type;
      //   params.endTime = dataItem.type;
      // }

      return params;
    },
  },
  watch: {
    // data: "time_value",
    dataVal(nVal,oVal){
      console.log("==============");
      this.dataVal = nVal;
      this.postParams.classId = nVal;
      console.log(nVal);
    }
  },
  mounted() {
    //获取当前月份
    // var nowData = new Date().toLocaleDateString();
    // var yStr = nowData.slice(0, 4);
    // var mStr = nowData.slice(5, 7);
    // this.postParams.date = yStr + mStr;

    // var defaultDate = `${yStr}-${mStr}`;
    // this.$set(this, "hqdateVal", defaultDate);
    this.queryTimeDataToSelect();
  },
  methods: {
    queryTimeDataToSelect(){
      queryTimeData(this.postParams)
        .then((res) => {
          if(res.data.length != 0){
            for(var i=0;i<res.data.length;i++){
            if(i==0){
              this.postParams.classId = res.data[i].id;
              console.log(this.postParams);
              this.dataVal = res.data[i].id;
            }
            this.data.push({label: res.data[i].className, value: res.data[i].id});
          }
        }else{
          this.data.push({label: '请选择', value: 0});
        }

    this.getRecordList();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // time_value(value) {
    //   // if (value === null) {
    //   //   //获取当前月份
    //   //   var nowData = new Date().toLocaleDateString();
    //   //   var yStr = nowData.slice(0, 4);
    //   //   var mStr = nowData.slice(5, 7);
    //   //   this.postParams.date = yStr + mStr;
    //   //   this.getRecordList();
    //   // }
    //   this.getRecordList();
    // },
    /**
     * 查询点击
     *
     */
    searchClick() {
      // debugger;
      const hqdateVal = this.hqdateVal + "";

      var str = "中国标准时间";

      // if (hqdateVal.indexOf(str) === -1) {
      //   //获取当前月份
      //   var nowData = new Date().toLocaleDateString();
      //   var yStr = nowData.slice(0, 4);
      //   var mStr = nowData.slice(5, 7);
      //   this.postParams.date = yStr + mStr;
      //   this.getRecordList();
      // } else {
      //   const y = hqdateVal.slice(11, 15);
      //   const m = hqdateVal.slice(4, 7);
      //   if (m == "Jan") {
      //     this.month = "01";
      //   } else if (m == "Feb") {
      //     this.month = "02";
      //   } else if (m == "Mar") {
      //     this.month = "03";
      //   } else if (m == "Apr") {
      //     this.month = "04";
      //   } else if (m == "May") {
      //     this.month = "05";
      //   } else if (m == "Jun") {
      //     this.month = "06";
      //   } else if (m == "Jul") {
      //     this.month = "07";
      //   } else if (m == "Aug") {
      //     this.month = "08";
      //   } else if (m == "Sep") {
      //     this.month = "09";
      //   } else if (m == "Oct") {
      //     this.month = "10";
      //   } else if (m == "Nov") {
      //     this.month = "11";
      //   } else if (m == "Dec") {
      //     this.month = "12";
      //   }
      //   this.postParams.date = y + this.month;
      //   this.getRecordList();
      // }
      this.getRecordList();
    },

    /**
     * 获取相关列表
     */
    getRecordList(dataIndex) {
      console.log("222");
      this.dataIndex = dataIndex;
      this.list = [];
      this.loading = true;
      resultsDataStat(this.postParams)
        .then((res) => {
          this.loading = false;
          const data = res.data || {};
          this.list = data || [];
          if (data) {
            this.weekList = data[0].sum.weekData;
            this.weekListlength = this.weekList.length;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 导出点击
     */
    exportClick() {
      this.requestExportInfo(resultsDataStatExport, this.postParams);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../styles/detail.scss";
</style>

<style scoped lang="scss">
.head {
  position: absolute;
  padding: 15px 45px;
  top: 0;
  right: 0;
  left: 0;
  background: #fff;
  z-index: 1;

  &__body {
    position: relative;
    .user-box {
      width: unset;
      height: 36px;
      padding: 4px 7px;
      border: 1px solid #e1e1e1;
      border-radius: $xr-border-radius-base;
      background-color: white;
      margin-right: 20px;
      display: flex;
      cursor: pointer;
      .user-icon {
        background: $xr-color-primary;
        color: white;
        padding: 5px 6px;
        border-radius: 50%;
      }
      .username {
        font-size: 12px;
        margin: 0 8px;
      }
    }
    .el-radio-group {
      /deep/ .el-radio-button__inner {
        font-size: 12px;
        padding: 11px 12px;
      }
    }
    /deep/ .type-select {
      height: 36px;
    }

    .sort-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
.table_box {
  width: 100%;
  height: 670px;
  overflow-y: auto;

  position: relative;
  .flex_list {
    display: flex;
    align-items: center;
  }
  .table_th {
    p {
      flex: 1;
      color: #000;
      font-size: 14px;
      text-align: center;
      border: 1px solid #eee;
      height: 35px;
      line-height: 35px;
      background-color: #f6f8fa;
    }
    .left {
      flex: 1;
      border: 1px solid #eee;
    }
  }
  .table_tr {
    color: #333;
    border: 1px solid #eee;
    border-top: none;
    .left {
      flex: 1;
      text-align: center;
    }
    .right {
      flex: 1;
      p {
        flex: 1;
        text-align: center;
        border: 1px solid #eee;
        height: 35px;
        line-height: 35px;
      }
    }
    .table_tr_sum {
      .left {
        flex: 1;
        height: 35px;
        line-height: 35px;
        background: rgb(230, 143, 12);
        border: 1px solid #eee;
      }
      p {
        flex: 1;
        text-align: center;
        height: 35px;
        line-height: 35px;
        border: 1px solid #eee;
        background: rgb(230, 143, 12);
      }
    }
  }
}
.nullList {
  line-height: 40px;
  text-align: center;
  border: 1px solid #eee;
  height: 40px;
}
.table-content {
  padding: 0;
  margin: 20px 40px;
  margin-top: 40px;
}
.content {
  position: relative;
}
.table_box {
  width: 130%;
}
.handle-bar {
  position: absolute;
  right: 0;
  top: 50px;
  background: #fff;
  padding-right: 25px;
  width: 100%;
  z-index: 99;
  padding-bottom: 10px;
}
</style>
